<template>
  <transition name="van-fade">
    <div v-if="is_loading" class="loading_box flex-center-center">
      <div class="loading flex-center-center">
        <img class="rotate" src="@/assets/img/loading.gif" />
      </div>

      <!-- <div class="loader">
			<div class="text">Loading...</div>
			<div class="horizontal">
			<div class="circlesup">
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
			</div>
			<div class="circlesdwn">
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
			</div>
			</div>
			<div class="vertical">
			<div class="circlesup">
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
			</div>
			<div class="circlesdwn">
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
			</div>
			</div>
		</div> -->
    </div>
  </transition>
</template>

<script>
  export default {
    computed: {
      is_loading() {
        return this.$store.state.loading
      }
    },
    methods: {
      // 关闭loading
      switch_loading() {
        this.$store.commit('switch_loading')
      }
    }
  }
</script>

<style scoped>
  .loading_box {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
  }
  .loading {
    width: 100px;
    height: 100px;
    /* margin-left: 275px;
	margin-top: 300px; */
    text-align: center;
    color: #ffffff;
    /* background-color: rgba(0,0,0,0.8); */
    border-radius: 10px;
  }
  .loading img {
    width: 50px;
    height: 50px;
    vertical-align: middle;
  }
  .loading .icon {
    width: 80px;
    height: 80px;
    vertical-align: middle;
  }

  * {
    margin: 0em;
    padding: 0em;
  }

  body {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background: #403833;
    font-family: 'Open Sans';
    font-weight: 100;
    color: #f2f2f2;
    font-size: 100%;
    margin: 0em;
    padding: 0em;
  }

  /* Start the loader code, first, let's align it the center of screen */
</style>
